<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>分享</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/share.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style>
        .swiper-box {
            width: 100%;
            padding-left: 1rem;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;


            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: .6rem;
        }

        .swiper-slide {
            width: 80%;
        }

        .swiper-slide:last-of-type {
            margin-right: 2rem;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="header">
            <span>长按保存图片分享，分享图有异样？<i><img src="images/shuaxin.svg" onclick="location.reload()" alt="">点我刷新</i></span>
        </div>
        <!-- 轮播图 -->
        <div class="swiper-box">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="upload/cp3.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/cp2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="upload/cp1.jpg" alt=""></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_box">
                <span>
                    您还可以复刻你的专属链接分享给好友
                </span>
            </div>
            <div class="footer_button">
                <button class="button1" onclick="javascript:window.history.back(-1);" title="返回上一页">返回</button>
                <button id="copyBT" class="button2">复制链接</button>
                <!-- 地址要修改 -->
                <span id="content">
                    http://127.0.0.1:5500/shuipiaopp.html
                </span>
                <span class="toast"
                    style="z-index: 10; font-size: 1rem; display: none;background-color: #7f7f7f;border-radius: 5px;padding: .5rem 2rem;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);border: none;opacity: 0.9;color: #fff;text-align: center;">
                    复制成功</span>

            </div>
            <!-- <div class="disclaimer ">
                <div class="mianze">
                    免责声明
                </div>
                <div class="description">
                    <p>所有产品及其相关信息来自产品方，</p>
                    <p>与xxx无关，市场有风险，用户需谨慎。</p>
                </div>
            </div> -->


        </div>

    </div>
    <script src="js/flexible.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        //轮播图
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: "auto",
            spaceBetween: 30,

        });
        //弹框
        function copyArticle(event) {
            const range = document.createRange();
            range.selectNode(document.getElementById('content'));

            const selection = window.getSelection();
            if (selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand('copy');
        }
        document.querySelector('#copyBT').onclick = function () {
            document.querySelector('.toast').style.display = ''
            // // 2 s后自动关闭
            setTimeout(() => {
                document.querySelector('.toast').style.display = 'none'
            }, 2000);

        }
        document.getElementById('copyBT').addEventListener('click', copyArticle, false);
    </script>
</body>

</html>